<template>
  <view class="content">
    <wd-divider>{{ year }}年{{ month }}月标准工时</wd-divider>
    <wd-card class="action-section">
      <wd-cell-group class="body">
        <wd-cell title="总工作日" :value="`${totalDays}天`" />
        <wd-cell title="标准工时" :value="`${totalHours}小时`" />
        <wd-cell title="已过工作日" :value="`${passedDays}天`" />
        <wd-cell title="工时" :value="`${passedDays * 8}小时`" />
        <wd-cell title="标准工时" :value="`${totalHours}小时`" />
        <wd-cell title="剩余工作日" :value="`${remainDays}天`" />
      </wd-cell-group>
    </wd-card>
  </view>
</template>
<script setup>
  import dayjs from 'dayjs';
  import isoWeek from 'dayjs/plugin/isoWeek';

  dayjs.extend(isoWeek);

  const year = ref(dayjs().format('YYYY'));
  const month = ref(dayjs().format('MM'));
  const hoursPerDay = ref(8);
  const totalDays = ref(0);
  const totalHours = ref(0);
  const passedDays = ref(0);
  const remainDays = ref(0);

  //
  //
  const isWorkDay = (date) => {
    const day = date.day(); // 0=周日, 6=周六
    if (day === 0) return false; // 周日休息
    if (day === 6) {
      // 判断单双周：单周六上班，双周六休息
      const weekOfYear = date.isoWeek();
      return weekOfYear % 2 === 1;
    }
    return true;
  };
  const getWorkDays = (year, month) => {
    const start = dayjs(`${year}-${month}-01`);
    const end = start.endOf('month');
    const workDays = [];

    for (let d = start; d.isBefore(end) || d.isSame(end); d = d.add(1, 'day')) {
      if (isWorkDay(d)) {
        workDays.push(d);
      }
    }
    return workDays;
  };
  const calcWork = () => {
    const workDays = getWorkDays(year.value, month.value);
    totalDays.value = workDays.length;
    totalHours.value = totalDays.value * hoursPerDay.value;

    const today = dayjs();
    passedDays.value = workDays.filter((d) => d.isBefore(today, 'day') || d.isSame(today, 'day')).length;
    remainDays.value = totalDays.value - passedDays.value;
  };
  onMounted(() => {
    calcWork();
  });
</script>
<style scoped lang="scss">
  .content {
    width: 100%;
    padding: 10rpx 0;
  }
</style>
